<template>
  <div class="header" @click="headerClick()">
    <div class="header-left">
      <div class="iconfont icon-back">&#xe624;</div>
    </div>
    <div class="header-input">
      <span class="iconfont icon-search">&#xe632;</span>
      input here
    </div>
    <div class="header-right">
      {{this.city}}
      <span class="iconfont icon-down">&#xe62d;</span>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name:'HomeHeader',
    data() {
      return{
        params: {
          'page':1
        }
      }
    },
    props: {
      city: String
    },
    methods:{
      headerClick(){
        axios.defaults.baseURL = process.env.API_ROOT
        axios.post('/services/v1/dsUser/list',{
          params:{
            page:1
          }
        })
				.then(res => {
          if (res.data.code==200){
            const user =  res.data.result.data[0]
            console.log(user);
            // this.$state.commit('changeUser',user)
            //this.$store.state.commit('changeUser',user)
            this.$store.dispatch('setUser',user)
           }else{
             console.log("出错了"+res.data)
           }
        
          
				})
				.catch(error => {
					console.log(error)
				});

      }
    }
  }
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
  display:flex
  background:$bgColor
  line-height:$headerHeight
  font-size:30px
  color:#fff
  .header-left
    width:64px
    float:left
    .icon-back
      text-align:center
      font-size:30px
  .header-input
    background:#fff
    margin-top:12px
    margin-left:20px
    height:64px
    line-height:64px
    border-radius:10px
    padding-left:10px
    color:$darkTextColor
    flex:1
    .icon-search
      font-size:30px
  .header-right
    width:120px
    float:right
    text-align: center
    height:$headerHeight
    line-height:$headerHeight
    .icon-down
      text-align:center
      font-size:30px
</style>
